(defpackage :page-index
  (:use :cl)
  (:import-from :action-examples :define-action-examples)
  (:export
   ))

(in-package :page-index)


(defun define-index-header ()
  (spinneret:with-html
    (:meta :charset "utf-8")
    (:meta :name "viewport" :content "width=device-width, initial-scale=1")
    (:meta :http-equiv "content-type" :content "text/html; charset=UTF-8")
    (:meta :http-equiv "Cache-Control" :content "no-cache, no-store, must-revalidate")
    (:meta :name "description" :content "daisyUI examples in Common Lisp")
    (:script (:raw
              "try {
    document.documentElement.setAttribute('data-theme', localStorage.getItem('theme'))
    } catch (e) { }"))
    ;;(:script :src "https://cdn.tailwindcss.com")
    ;;(:link :href "https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" :rel "stylesheet" :type "text/css")
    (:script :src "https://unpkg.com/htmx.org@2.0.1" :integrity "sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" :crossorigin "anonymous")
    (:link :href "/static/output.css" :rel "stylesheet" :type "text/css")
    (:title "CL for daisyUI")
    ))


(defun define-navbar ()
  (spinneret:with-html
    (:div :class "bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)] shadow-sm"
          (:nav :class "navbar w-full"
                (:div :class "flex flex-1 md:gap-1 lg:gap-2"
                      ;; Hamburger menu
                      (:span :class "tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]" :data-tip "Menu"
                             (:label :aria-label "Open menu" :for "drawer" :class "btn btn-square btn-ghost drawer-button lg:hidden" "☰"))
                      ;; left components in the leftside of the navbar
                      (:div :class "flex items-center gap-2"
                            ;; logo in the left most
                            (:a :href "/" :aria-current "page" :aria-label "daisyUI" :class "flex-0 btn btn-ghost gap-1 px-2 md:gap-2"
                                (:span :class "font-title text-base-content text-lg md:text-2xl" "cl-daisyUI"))
                            ;; version dropdown
                            (dui:dropdown/css-focus "dropdown"
                                (:div :tabindex "0" :role "button" :class "link link-hover inline-block font-mono text-xs" "VerXX")
                              (:ul :tabindex "0" :class "dropdown-content menu menu-sm bg-base-200 rounded-box mt-7 w-36 border border-white/5 p-2 shadow-2xl outline outline-1 outline-black/5"
                                   (:li (:a :href "/changelog/" "Changelog"))
                                   (:li) ; empty <li> has not styled yet
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/ver/3" "Version 3.x"))
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/ver/2" "Version 2.x"))
                                   (:li)
                                   (:li (:a :target "_blank" :rel "noopener, noreferrer" :href "/Roadmap" "Roadmap")))))
                      ;; more left components below
                      )
                ;; right components in the rightside of the navbar
                (:div :class "flex-0"
                      ;; button
                      (:div :class "hidden flex-none items-center lg:block"
                            (:a :class "btn btn-ghost drawer-button font-normal" :href "/components" "Components"))
                      ;; more right components below
                      )))))


(defun define-index-body ()
  (spinneret:with-html
    (:article :class "prose max-w-none" ; https://github.com/tailwindlabs/tailwindcss-typography
              (:h1 "Components")
              (:h2 "Actions")
              (define-action-examples)
              (layout-examples::define-drawer-example)
              )))


(defun define-index-page ()
  (spinneret:with-html-string
    (:doctype)
    ;; https://daisyui.com/docs/themes/
    (:html :lang "zh-CN" :data-theme "null" :style "scroll-padding-top: 5rem; scroll-behavior: smooth;"
           (:head
            (define-index-header))
           (:body
            (:div
             (:div :class "bg-base-100 drawer lg:drawer-open"
                   (:input :id "drawer" :type "checkbox" :class "drawer-toggle")
                   (:div :class "drawer-content"
                         (define-navbar)
                         (define-index-body)
                         )))))))


(easy-routes:defroute page-index ("/" :method :get) ()
  "Return a web page with a list of project tables related with the project id and the session user."
  (define-index-page))
